<template>
    <div class="home">
        <van-row type="flex" justify="space-between" class="banner">
            <van-image class="banner_left" :src="require('@/assets/images/bg_banner_left_run.png')"/>
            <van-image class="text_img" :src="require('@/assets/images/bg_banner_text.png')"/>
        </van-row>
        <div class="order_container panel">
            <h3 class="title"><span><font>订单详情</font></span></h3>
            <div class="order_item">
                <p><label>订单号：</label><span>{{order.order_number}}</span></p>
                <p><label>支付时间：</label><span>{{order.pay_time}}</span></p>
                <p><label>支付金额：</label><span class="red">&yen;{{order.money}}</span></p>
                <p><label>学校名称：</label><span >{{order.school_name||'--'}}</span></p>
                <p class="serve">
                    <label>服务码：</label>
                    <span>{{order.serve_code*1||'--'}}</span>
                    <van-button  v-if="order.serve_code*1"  class="check_serve_btn" @click="checkServeHandle(order.serve_code)" type="warning" plain hairline size="mini">查看服务商
                            </van-button>
                </p>
                <p class="serve">
                    <label>实际服务码：</label>
                    <span>{{order.actual_serve_code*1||'--'}}</span>
                    <van-button v-if="order.actual_serve_code*1" class="check_serve_btn" @click="checkServeHandle(order.actual_serve_code)" type="warning" plain hairline size="mini">查看服务商
                            </van-button>
                </p>
                <img :src="require('@/assets/images/bg_order_finished.png')"   v-if="order.state==1" class="sign">
            </div>
            <h3 class="title"><span><font>商品详情</font></span></h3>
            <div class="order_item">
                <p><label>定制内容：</label><span>{{order.class_num}}个班+每周{{order.course}}节课</span></p>
            </div>
        </div>
        <van-button block type="warning"
                    @click="$router.go(-1)"
                    loading-text="信息提交中..." class="confirm_btn">返回订单列表
        </van-button>
        <van-dialog v-model="showServe" title="服务商信息">
            <div class="serve_content">
                <p><label>联系方式：</label><b>{{serveInfo.username||'--'}}</b></p>
                <p><label>姓名：</label><b>{{serveInfo.name||'--'}}</b></p>
                <p><label>机构名称：</label><b>{{serveInfo.institution_name||'--'}}</b></p>
            </div>
        </van-dialog>
    </div>
</template>
<script>
// @ is an alias to /src
import $api from "@/api/index";
export default {
  name: "orderDetail",
  data() {
    return {
      showServe: false,
      serveInfo: {
        username: '',
        name: '',
        institution_name: ''
      },
      className: '',
      blockLoading: true,
    };
  },
  created(){
    this.order = this.$route.query
    console.log(this.order)
  },
  methods: {
    //查看服务商信息
    checkServeHandle(serve_code){
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      });
      $api.user.getServeInfo({serve_code}).then(res => {
        this.showServe =true
        this.serveInfo = res.data
      }).finally(res=>{
        this.$toast.clear();
      })
    }
  },
};
</script>
<style lang="scss" scoped>
    ::v-deep {
        .banner .banner_left {
            width: 287px;
            height: 280px;
            margin-top: -10px;
        }
        .order_container {
            width: 690px;
            box-sizing: border-box;
            margin: -17px auto 0;
            position: relative;
            padding: 30px 40px;
            z-index: 10;
            &.panel {
                background-color: #fff;
                box-shadow: 0px 2px 9px 0px rgba(51, 51, 51, 0.1);
                border-radius: 10px;
                overflow: hidden;
            }
            .order_item {
                padding: 20px 0;
                p {
                    display: flex;
                    align-items: center;
                    font-size: 28px;
                    margin: 0;
                    line-height: 45px;
                    label {
                        color: #212121;
                    }
                    span {
                        color: #8A8A8A;
                    }
                    .red {
                        color: #FF3535 !important;
                    }
                    .check_serve_btn {
                        font-size: 22px;
                        border-radius: 5px;
                        margin-left: 20px;
                    }
                    &.serve {
                        margin-top: 12px;
                    }
                }
                .sign {
                    position: absolute;
                    width: 150px;
                    height: 150px;
                    right: 37px;
                    bottom:35px;
                }
            }
            .title {
                text-align: center;
                font-size: 28px;
                font-weight: bold;
                margin: 0;
                color: #292929;
                span {
                    position: relative;
                    padding: 0 10px;
                    font {
                        z-index: 2;
                        position: relative;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 2px;
                        left: 0;
                        width: 100%;
                        height: 6px;
                        background: #FF804E;
                        border-radius: 3px;
                        z-index: 1;
                    }
                }
            }
        }
        .confirm_btn {
            width: 376px;
            height: 74px;
            background: linear-gradient(180deg, #FF9C70 0%, #FF804E 100%);
            border-radius: 10px;
            font-size: 28px;
            margin: 90px auto;
        }
    }
</style>
